<template>
    <div class="page">
        <!-- <div class="one">
            <div @click="but(index)" v-for="(item, index) in list" class="two"
                :data-coordinate="`${item.coordinate[0]}-${item.coordinate[1]}`">
                {{ index }}
            </div>
            <div class="twos" ref="twos"></div>

        </div> -->

    </div>
</template>

<script setup>

// 地图模组开始
const list = {
    // mapId: "map1",
    // characterCoordinate: [0, 0],
    // totalCoordinate: [10, 10],
    // mapScale: 3,
    // mapName: "明月村",
    // mapDetails: "一个平平无奇的小村庄,坐落在一大片森林中央",
    // coordinate: [],
    // parentId: null,
    // mapInformations: null,
    // state: 1
    mapId: "map2",
    characterCoordinate: [0, 0],
    totalCoordinate: [10, 10],
    mapScale: 3,
    mapName: "喜神村",
    mapDetails: "人们总是希望趋吉避凶、追求喜乐，因此取名为喜神村也叫做吉神村。村中人口异常繁荣，是较大的人口流动地区",
    coordinate: [],
    parentId: null,
    mapInformations: null,
    state: 2
}

// 明月村，人物3 // 宝箱五  木材2处
// 喜神村, 人物不明  宝箱10  鱼池一处
let index1 = 0
let bao = []
let npc = []
let total = []
// 初始化宝箱
for (let index = 0; index < 5; index++) {
    index1 = index;
    while (index1 == index) {
        let one = Math.floor(Math.random() * 100)
        if (bao.indexOf(one) == -1) {
            bao.push(one)
            total.push(one)
            index1 = index + 1
        }
    }
}
// 初始化npc
let index3 = 0
for (let k = 0; k < 3; k++) {
    index3 = k;
    while (index3 == k) {
        let two = Math.floor(Math.random() * 100)
        if (total.indexOf(two) == -1) {
            npc.push(two)
            total.push(two)
            index3 = k + 1
        }

    }
}
// 初始化鱼类资源
let fishedList = [];
let fished = 0;
while (fished < 1) {
    let three = Math.floor(Math.random() * 100)
    if (total.indexOf(three) == -1) {
        fishedList.push(three)
        total.push(three)
        fished++
    }
}
//初始化木头资源
let woodList = [];
let wood = 0;
// while (wood < 2) {
//     let three = Math.floor(Math.random() * 100)
//     if (total.indexOf(three) == -1) {
//         woodList.push(three)
//         total.push(three)
//         wood++
//     }
// }

let index2 = 0;
for (let index = 0; index < list.totalCoordinate[0]; index++) {
    for (let k = 0; k < list.totalCoordinate[1]; k++) {
        let type = 1;
        let npcs = null
        let resourceNum = 0
        if (bao.indexOf(index2) != -1) {
            type = 3
        }
        if (npc.indexOf(index2) != -1) {
            type = 2
        }
        if (fishedList.indexOf(index2) != -1) {
            type = 5
            resourceNum = (Math.floor(Math.random() * 5) + 5) * 12
        }
        if (woodList.indexOf(index2) != -1) {
            type = 4
            resourceNum = (Math.round(Math.random() * 10)) * 15
        }
        let incident = 0
        if (type == 1) {
            incident = Math.floor(Math.random() * 3)
        }
        list.coordinate.push({
            mapId: list.mapId,
            coordinateId: [index, k],
            coordinateType: type,
            incident: incident,
            resource: resourceNum
        })
        index2++
    }
}
console.log(list);
// // 地图模组结束
// 逆时针螺旋状地图开始
// function sprialArray(num) {
//     // 获取矩阵的行列数
//     var n = 2 * num + 1;
//     // 初始化一个值用于判断当前需要位移的数组
//     var m = 0;
//     //  生成数组最大值
//     var a = n * n;
//     // 生成一个数组
//     var arr = [];
//     // 循环生成一个二维数组
//     for (var i = 0; i < n; i++) {
//         arr[i] = new Array();
//         for (var j = 0; j < n; j++) {
//             arr[i][j] = 1;
//         }
//     }
//     for (let k = 0; k < 3; k++) {
//         m = k
//         // 向左边移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[m][n - index - 1] = a--
//         }
//         // 向下移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[index][m] = a--
//         }
//         // 向右移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[n - m - 1][index] = a--
//         }

//         // 向上移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[n - index - 1][n - m - 1] = a--
//         }


//     }



//     return arr;
// }
// 顺时针螺旋状数组
// function sprialArray(num) {
//     // 获取矩阵的行列数
//     var n = 2 * num + 1;
//     // 初始化一个值用于判断当前需要位移的数组
//     var m = 0;
//     //  生成数组最大值
//     var a = 0;
//     // 生成一个数组
//     var arr = [];
//     // 循环生成一个二维数组
//     for (var i = 0; i < n; i++) {
//         arr[i] = new Array();
//         for (var j = 0; j < n; j++) {
//             arr[i][j] = n * n;
//         }
//     }
//     for (let k = 0; k < n; k++) {
//         m = k
//         // 向右移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[m][index] = ++a;
//         }
//         // 向下移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[index][n - m - 1] = ++a;
//         }
//         // 向左移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[n - m - 1][n - index - 1] = ++a;
//         }
//         // 向上移动
//         for (let index = m; index < n - m - 1; index++) {
//             arr[n - index - 1][m] = ++a;
//         }

//     }

//     return arr;
// }
// console.log(sprialArray(2));
// let y = 1;
// let n = 2 * y + 1
// let arr=[]
// for (let index = 0; index < n; index++) {
//     arr.push()
// }

</script>

<style lang="scss" scoped>
.one {
    display: grid;
    grid-template-columns: repeat(10, 10%);
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    position: relative;

    .two {
        border: 1px solid #fff;
        box-sizing: border-box;
        font-size: 12px;
    }
}

.twos {
    --top: v-bind(topTwos);
    --left: v-bind(leftTwos);
    background: red;
    position: absolute;
    top: var(--top);
    left: var(--left);
    transition: all .8s;
}
</style>